<script>
import {approvalStatus} from "@/api/features/signUpApproval.js";
import {projectsOptions} from "@/api/features/signUpApproval.js";
import {tableData} from "@/api/features/signUpApproval.js";
import {ref} from "vue";

export default {
  name: "SignUpApproval",
  data()  {
    return {
      approvalOptions: approvalStatus,
      projectsOptions: projectsOptions,
      approvalValue : ref(''),
      projectsValue : ref(''),
      tableData: tableData,
    }
  },
  methods: {
    resetSelect() {
      this.approvalValue = '';
      this.projectsValue = '';
    },
  }
}
</script>

<template>
  <div class="sign-up">
    <div class="sign-up-screen">
      <div class="sign-up-screen-group">
        <span class="sign-up-screen-group-item">
          比赛项目：
        </span>
        <el-select size="large" class="sign-up-search-projects-select" v-model="projectsValue" placeholder="请选择">
          <el-option
              v-for="item in projectsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div class="sign-up-screen-group">
        <span class="sign-up-screen-group-item">
          审核状态：
        </span>
        <el-select size="large" class="sign-up-search-approval-select" v-model="approvalValue" placeholder="请选择">
          <el-option
              v-for="item in approvalOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          />
        </el-select>
      </div>
      <el-button size="large" type="primary" class="sign-up-screen-button">查询</el-button>
      <el-button size="large" class="sign-up-screen-button" @click="resetSelect">重置</el-button>
    </div>
    <div class="sign-up-content">
      <div>
        <el-button type="primary">刷新</el-button>
      </div>
      <div class="sign-up-content-list">
        <div>
          <el-table size="large" class="sign-up-content-list-table" :data="tableData" >
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
.sign-up {
  height: 90%;
  width: 95%;
}

.sign-up-screen {
  display: flex;
  align-items: center;
  margin-left: 20px;
  height: 15%;
  width: 100%;
}

.sign-up-screen-group {
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.sign-up-search-approval-select {
  width: 120px;
}

.sign-up-search-projects-select {
  width: 150px;
}

.sign-up-screen-group-item {
  font-size: 17px;
  color: rgb(75, 75, 75);
  font-weight: 400;
}

.sign-up-screen-button {
  margin-left: 10px;
  font-size: 16px;
}

.sign-up-content {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 20px;
  height: 85%;
  width: 100%;
}

.sign-up-content-list {
  display: flex;
  flex-direction: column;
  margin: 20px 20px 20px 0;
}

.sign-up-content-list-table {
  height: 100%;
  width: 100%;
  font-size: 17px;
}
</style>